<script>
/**
 * Widget Component
 */
export default {
  data() {
    return {
      statData: [
        {
          title: "日志收集总量",
          icon: "ri-stack-line",
          value: "4020.2万条",
          subvalue: "308GB",
          text: "日志存储总量",
        },
        {
          title: "最新异常日志",
          icon: "ri-store-2-line",
          value: "20.2万条",
          subvalue: "22.3万条",
          text: "昨日异常",
        },
        {
          title: "最近采集异常",
          icon: "ri-briefcase-4-line",
          value: "2.6万条",
          subvalue: "2,001条",
          text: "存储异常",
        },
        {
          title: "最近处理异常",
          icon: "ri-archive-drawer-line",
          value: "12.6 万条",
          subvalue: "6.323条",
          text: "接口异常",
        },
      ],
    };
  },
  methods:{
    toLog2(){
      // this.$router.push({name:'log2'})
    }
  }
};
</script>

<template>
  <div class="row">
    <div class="col-md-3" v-for="(data, index) in statData" :key="index">
      <div class="card">
        <div class="card-body">
          <div class="media">
            <div class="media-body overflow-hidden">
              <p class="text-truncate font-size-14 mb-2" @click="toLog2">{{ data.title }}</p>
              <h4 class="mb-0">{{ data.value }}</h4>
            </div>
            <div class="text-primary">
              <i :class="`${data.icon} font-size-24`"></i>
            </div>
          </div>
        </div>

        <div class="card-body border-top py-3">
          <div class="text-truncate">
            <span class="badge badge-soft-success font-size-11">
              <!-- <i class="mdi mdi-menu-up"></i> -->
              {{ data.subvalue }}
            </span>
            <span class="text-muted ml-2">{{ data.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end row -->
</template>